<!-- 详情通用组件 -->
<template>
  <div class="detail-component">
    <no-scroll-layout>
      <template #header>
        <h3>{{ title }}</h3>
        <el-row class="detail-base-info">
          <el-col
            :span="8"
            v-for="item in detailBaseInfo"
            :key="item.key">
            <span>{{ item.title }}</span>
            <span v-if="item.key==='resone'">质检不合格退货</span>
            <span v-else-if="item.key==='province'"> {{ baseInfo['province'] }} -
              {{ baseInfo['city'] }} - {{ baseInfo['area'] }} - {{ baseInfo['detailedAddress'] }}
            </span>
            <span v-else-if="item.key==='orderStatus'">{{ baseInfo[item.key]===1? '待收货' : '已完成' }}</span>
            <span v-else> {{ baseInfo[item.key] }} </span>
          </el-col>
        </el-row>
      </template>
      <!-- 列表模块 -->
      <el-editable
        :data="tableData"
        v-loading='tableLoading'
        :columns="detailColumns"
      />
      <template #footer>
        <!-- 分页模块 -->
        <el-pagination
          align="right"
          style="margin-top: 10px;"
          @size-change="sizeChange"
          @current-change="pageChange"
          :page-sizes="PAGE_NUMBER"
          :page-size="page.size"
          :current-page="page.page"
          :layout="PAGINATION_LAYOUT"
          :total="page.total"/>
      </template>
    </no-scroll-layout>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable'
import { hasIn } from 'lodash'
import NoScrollLayout from '@/layouts/noScrollLayout'
import paginationMixin from '@mixins/paginationMixin'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import SearchForm from '@components/businesscomponents/search'
import { getByBsAddress } from '@const/hospitalSideApi'
import {
  getByCheckHospitalReturn,
  getScWarehouseEntryRead,
  getReturnDetailById,
  getProductList,
  returnList,
  getReturnForm
} from '@const/orderCenterApi'
export default {
  mixins: [ paginationMixin ],
  components: { ElEditable, SearchForm, NoScrollLayout },
  props: {
    title: {
      type: String,
      default: ''
    },
    baseInfoDic: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    orderId: {
      type: String,
      default: ''
    },
    interface: {
      type: String,
      default: ''
    },
    baseInfoInterface: {
      type: String,
      default: ''
    }
  },
  watch: {
    baseInfoDic: val => {
      this.detailBaseInfo = val
    },
    columns: val => {
      this.detailColumns = val
    }
  },
  data () {
    return {
      // 表格数据
      baseInfo: {},
      // 详情基本信息
      tableData: [],
      // 表格Loading
      tableLoading: false,
      // 表头
      detailColumns: this.columns,
      // 表单 详情展示内容-table
      detailBaseInfo: this.baseInfoDic,
      // 详情ID
      detailsId: this.$route.query.orderId,
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      page: {
        page: 1,
        size: PAGE_NUMBER[0],
        total: 0
      }
    }
  },
  mounted () {
    this.getByCheckHospitalReturn()
    this.getHeadInfo()
  },
  methods: {
    // 获取产品列表
    getItems () {
      // Loading加载开始
      // this.tableLoading = true
      // if (this.interface) {
      //   this[this.interface]()
      //   if (this.baseInfoInterface) {
      //     this[this.baseInfoInterface]()
      //   }
      // } else {
      //   this.tableLoading = false
      //   this.$message.error('请开发者提供正确的接口')
      // }
    },
    // 查询质检退货订单详情(医院端，配送商端公用)
    getByCheckHospitalReturn () {
      this.$axios.post(getByCheckHospitalReturn, { orderId: this.orderId, page: this.page.page, pageSize: this.page.size })
        .then(({ data }) => {
          if (Number(data.code)) return
          this.tableData = data.payload.content || []
          this.page.total = data.payload.totalElements
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 采购退货详情（配送商端）
    // getReturnDetailById () {
    //   this.$axios.get(getReturnDetailById, { params: { orderId: this.orderId } })
    //     .then(({ data }) => {
    //       if (Number(data.code)) return
    //     })
    // },
    getProductList () {
      this.tableLoading = true
      this.$axios.$post(getProductList, { orderId: this.orderId })
        .then(({ code, payload }) => {
          if (!Object.is(code, '0')) return
          this.tableData = payload.content || []
        })
        .finally(() => { this.tableLoading = false })
    },
    returnList () {
      // this.$axios.$post(returnList, { orderId: this.orderId })
      // .then(({ code, payload }) => {
      //   if (!Object.is(code, '0')) return
      //   this.baseInfo = (payload.content && payload.content[0]) || {}
      //   this.getByBsAddress(this.baseInfo.addressId)
      // })
    },

    // 获取头部数据
    getHeadInfo () {
      this.$axios({
        method: 'post',
        url: getReturnForm,
        data: {
          orderId: this.orderId
        }
      }).then(res => {
        // console.log(res, '头部')
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.baseInfo = result[0] || []
        if (this.baseInfo && this.baseInfo.receiveAddressId) {
          this.getByBsAddress(this.baseInfo.receiveAddressId)
        }
      })
    },

    // 查询地址详情
    getByBsAddress (id) {
      this.$axios.$post(getByBsAddress + `?id=${id}`)
        .then(({ code, payload }) => {
          if (!Object.is(code, '0')) return
          this.baseInfo = { ...this.baseInfo, ...payload }
          // console.log(this.baseInfo, '头部所有')
        })
    },

    sizeChange (size) {
      this.page.size = size
      this.getByCheckHospitalReturn()
    },

    pageChange (page) {
      this.page.page = page
      this.getByCheckHospitalReturn()
    }

  }
}
</script>

<style lang="less" scope>
.detail-component {
  h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    color: rgba(38, 52, 76, 1);
    border-bottom: 1px solid rgba(238, 240, 245, 1);
  }

  .detail-base-info {
    .el-col {
      margin-bottom: 10px;
      height: 20px;
      line-height: 20px;

      > span {
        width: 49%;
        font-weight: 400;
        line-height: 20px;
        display: inline-block;

        &:first-child {
          text-align: right;
          padding-right: 8px;
          color: rgba(167, 177, 199, 1);
        }

        &:last-child {
          overflow: hidden;
          white-space: nowrap;
          vertical-align: bottom;
          text-overflow: ellipsis;
          color: rgba(38, 52, 76, 1);
        }
      }
    }
  }
}
</style>
